<template>
  <view class="index-container">
    <!-- 登录弹窗 -->
    <u-popup 
      v-model="showLoginModal" 
      mode="bottom" 
      :border-radius="20"
      :closeable="true"
      @close="closeLoginModal"
    >
      <view class="login-popup">
        <view class="login-header">
          <text class="login-title">用户登录</text>
        </view>
        
        <view class="login-form">
          <view class="form-item">
            <text class="form-label">账号</text>
            <input 
              class="form-input" 
              v-model="loginForm.username" 
              placeholder="请输入账号"
              :focus="loginForm.usernameFocus"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">密码</text>
            <input 
              class="form-input" 
              v-model="loginForm.password" 
              placeholder="请输入密码"
              password
              :focus="loginForm.passwordFocus"
            />
          </view>
          
          <view class="login-actions">
            <button class="btn btn-cancel" @click="closeLoginModal">取消</button>
            <button class="btn btn-login" @click="handleLogin">登录</button>
          </view>
        </view>
      </view>
    </u-popup>
    
    <!-- 质检单列表 -->
    <scroll-view 
      class="list-container" 
      scroll-y="true"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view 
        v-for="(item, index) in qualityList" 
        :key="index" 
        class="list-item"
        @click="viewDetail(item)"
      >
        <!-- 计划号 -->
        <view class="plan-number">
          <text class="label">计划号：</text>
          <text class="value">{{ item.plan_number || item.planNumber }}</text>
        </view>
        
        <!-- 详细信息 -->
        <view class="item-details">
          <view class="detail-row">
            <text class="label">车牌号</text>
            <text class="value">{{ item.license_plate || item.licensePlate }}</text>
          </view>
          
          <view class="detail-row">
            <text class="label">驾驶员</text>
            <text class="value">{{ item.driver }}</text>
          </view>
          
          <view class="detail-row">
            <text class="label">销售物料</text>
            <text class="value">{{ item.material }}</text>
          </view>
          
          <view class="detail-row">
            <text class="label">打印时间</text>
            <text class="value">{{ item.print_time || item.printTime }}</text>
          </view>
          
          <view class="detail-row">
            <text class="label">二磅时间</text>
            <text class="value">{{ item.weigh_time || item.weighTime }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view v-if="noMore && qualityList.length > 0" class="no-more-state">
        <text class="no-more-text">没有更多数据了</text>
      </view>
      
      <!-- 空状态 -->
      <view v-if="qualityList.length === 0 && !loading" class="empty-state">
        <text class="empty-text">暂无质检单数据</text>
      </view>
    </scroll-view>
    
    <!-- 底部浮动按钮组 -->
    <view class="floating-buttons">
      <!-- 新增按钮 -->
      <view class="floating-button add-btn" @click="addNew">
        <text class="add-icon">+</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLoginModal: false, // 是否显示登录弹窗
      loginForm: {
        username: '',
        password: '',
        usernameFocus: false,
        passwordFocus: false
      },
      qualityList: [], // 质检单列表
      loading: false, // 加载状态
      refreshing: false, // 下拉刷新状态
      noMore: false, // 是否没有更多数据
      pageNo: 1, // 当前页码
      pageSize: 10, // 每页数量
      total: 0 // 总数量
    }
  },
  onShow() {
    console.log('userInfo', this.userInfo)
    if (this.userInfo.id) { 
        this.$store.dispatch('getUserInfo').then(res => {
			if (this.qualityList.length === 0) {
				this.pageNo = 1;
				this.qualityList = []
				this.getQualityList();
			}
         
        })
    } else {
		this.pageNo = 1;
		this.qualityList = []
	}
  },
  
  methods: {
    // 获取质检单列表
    async getQualityList(isRefresh = false) {
      if (this.loading) return;
      
      this.loading = true;
      
      try {
        const params = {
          pageNo: isRefresh ? 1 : this.pageNo,
          pageSize: this.pageSize
        };
        
        const res = await this.$api.qualityInspection.page({
            ...params
        });
        console.log(res)
        const { list, total, current, pageSize } = res;
          
          if (isRefresh) {
            this.qualityList = list || [];
            this.pageNo = 1;
          } else {
            this.qualityList = [...this.qualityList, ...(list || [])];
          }
          console.log('qualityList', this.qualityList)
          this.total = total || 0;
          this.pageNo = current || this.pageNo;
          this.pageSize = pageSize || this.pageSize;
          this.noMore = this.qualityList.length >= this.total;
      } catch (error) {
        console.log(error,'获取质检单列表失败:');
      } finally {
        this.loading = false;
        this.refreshing = false;
      }
    },
    
    // 加载更多
    loadMore() {
      if (this.loading || this.noMore) return;
      this.pageNo++;
      this.getQualityList();
    },
    
    // 下拉刷新
    onRefresh() {
		if (!this.userInfo.id) return
      this.refreshing = true;
      this.noMore = false;
      this.getQualityList(true);
    },
    
    // 查看详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}`
      });
    },
    
    // 新增质检单
    addNew() {
      if (!this.userInfo.id) {
        this.showLoginModal = true;
        return;
      }
        uni.navigateTo({
            url: `/pages/detail/detail`
        });
    },
    
    // 关闭登录弹窗
    closeLoginModal() {
      this.showLoginModal = false;
      this.resetLoginForm();
    },
    
    // 重置登录表单
    resetLoginForm() {
      this.loginForm = {
        username: '',
        password: '',
        usernameFocus: false,
        passwordFocus: false
      };
    },
    
    // 处理登录
    handleLogin() {
      // 表单验证
      if (!this.loginForm.username) {
        uni.showToast({
          title: '请输入账号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      this.$api.login({
        username: this.loginForm.username,
        password: this.loginForm.password
      }).then(res => {
        console.log('res', res)
        if (res) {
          this.$store.commit('SET_USERINFO', res);
          this.showLoginModal = false;
          this.getQualityList();
        }
      })
    }
  }
}
</script>

<style scoped>
.index-container {
  height: 100vh;
  background-color: #F5F5F5;
  padding: 10rpx;
  overflow: hidden;
  box-sizing: border-box;
}
.list-container {
	height: 100%;
	overflow: hidden;
  box-sizing: border-box;
}

.header {
  background-color: #007AFF;
  padding: 20rpx 30rpx;
  text-align: center;
}

.title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.list-item {
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  border-radius: 24rpx;
  background-color: #007AFF;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.plan-number {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  border-radius: 24rpx 24rpx 0 0;
  padding:12rpx 32rpx
}

.plan-number .label {
  color: #fff;
  font-size: 28rpx;
  margin-right: 12rpx;
}

.plan-number .value {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 24rpx;
  border-radius: 24rpx;
  background-color: #fff;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-row .label {
  color: #333;
  font-size: 26rpx;
  min-width: 140rpx;
  font-weight: 500;
}

.detail-row .value {
  color: #333;
  font-size: 26rpx;
  flex: 1;
  text-align: right;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
}

.loading-text {
  color: #007AFF;
  font-size: 28rpx;
}

.no-more-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
}

.no-more-text {
  color: #999;
  font-size: 24rpx;
}

.floating-button {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #007AFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  z-index: 999;
}

.add-icon {
  color: white;
  font-size: 48rpx;
  font-weight: bold;
}

.floating-button:active {
  transform: scale(0.95);
}

/* 登录弹窗样式 */
.login-popup {
  background-color: white;
  min-height: 400rpx;
}

.login-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #E5E5E5;
}

.login-title {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

.login-form {
  padding: 40rpx 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 15rpx;
}

.form-input {
  box-sizing: border-box;
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #E5E5E5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #FAFAFA;
}

.form-input:focus {
  border-color: #007AFF;
  background-color: white;
}

.login-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel {
  background-color: #F5F5F5;
  color: #666;
}

.btn-login {
  background-color: #007AFF;
  color: white;
}

.btn:active {
  opacity: 0.8;
}

/* 浮动按钮组样式 */
.floating-buttons {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  z-index: 999;
}

.login-btn {
  background-color: #FF9500;
}

.login-icon {
  color: white;
  font-size: 32rpx;
}
</style>
